<template>
	<view class="visitor-container">
		<c-layout>

			<c-navigation-bar :title="$t('classifySeckill.Followed')" slot="head" @backEvent='toUser()'></c-navigation-bar>
			<!--搜索-->
			<view class="totalPeople" slot="head">
				{{$t('anchorConsole.headcount')}}: {{totalPeople}}
			</view>
			<view slot="head" class="search">

				<u-input maxlength="12" type="text" v-model="input.value" :clearable="false" :placeholder="input.placeholder">
				</u-input>
				<view class="input-search-button">
					<u-icon name="search" size="40" color="#fff" @click="searchEvent"></u-icon>
				</view>
			</view>
			<view class="visitor-main">
				<view class="list" v-for="item in anchor.list" :key="item.id">
					<view class="left">
						<image size="89" @click="goToUserInfo(item.userId)" :src="$u.file.getMedieUrl(item.avatar)"
							style="border-radius: 50%;width: 89rpx;height: 89rpx;"></image>
						<view class="info">
							<text class="uaer-name">{{ item.nickName }}</text>
							<text class="des">
								{{publicJS.timeZoneSwitching(item.concernTime,"DD/MM/YYYY")}}
							</text>
						</view>
					</view>
					<view class="right">




						<view class="followBtn" @click="cancelUserConcernAjax(item.userId)">
							{{ $t('media.Followed')}}
						</view>
					</view>


				</view>
			</view>
		</c-layout>
		<u-mask :show="isloading">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u-loading size="36" mode="flower"></u-loading>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				// 主播相关列表及传递数据
				anchor: {
					data: {
						pageSize: 10,
						"pageNum": 1,
					},
					list: [],
				},
				input: {
					value: '',
					placeholder: this.$t('home.placeholder')
				},
				postTaskHallObj: {
					pageSize: 9999,
					pageNum: 1,
				},
				totalPeople: '',
			}
		},
		onLoad(val) {
			if (val.anchorId) {
				this.postTaskHallObj.id = val.anchorId
			}
			this.$u.post('/app/user/concern/page/followUser', this.postTaskHallObj).then(res => {
				this.totalPeople = res.data.total

				this.anchor.list = res.data.records


			})
		},

		methods: {
			toUser() {
				uni.reLaunch({
					url: '/pages/user/components/myUserInfo'
				})
			},
			// 获取粉丝列表
			getAnchorBrowseAjax(add) {
				this.$u.post('/app/user/concern/page/followUser', this.postTaskHallObj).then(res => {
					this.anchor.list = res.data.records

				})
			},

			searchEvent() {
				this.postTaskHallObj.pageNum = 1
				this.postTaskHallObj.name = this.input.value
				this.getAnchorBrowseAjax()
			},
			goToUserInfo(id) {
				uni.navigateTo({
					url: '/pages/user/components/userInfo?userId=' + id
				})
			},

			// 取消用户关注
			cancelUserConcernAjax(id) {
				this.isloading = true
				this.$u.post('/app/user/concern/' + id).then(res => {
					this.$u.toast(this.$t('classifySeckill.unfollowed'))
					setTimeout(() => {
						this.refresh()
						this.isloading = false
						this.$u.init.getUserInfo()
					}, 100)

				})
			},
			backEvent() {
				uni.reLaunch({
					url: '/pages/user/components/myUserInfo'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.visitor-container {
		font-family: "SFUIDisplay-Regular-Regular";
	}

	.totalPeople {
		font-size: 26rpx;
		font-weight: 400;
		color: #000000;
		margin: 0 40rpx;
	}

	.search {
		height: 110rpx;
		border-radius: 24rpx;
		backdrop-filter: blur(10px);
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		margin: 16px 16px 16px 16px;
		background: rgb(246, 247, 251);

		.input-search-button {
			width: 76rpx;
			height: 76rpx;
			background: #2934D0;
			border-radius: 20rpx;
			text-align: center;
			line-height: 85rpx;
		}
	}

	.visitor-main {
		padding: 40rpx;
		height: 78vh;
		overflow: auto;

		.list {
			display: flex;
			width: 100%;
			justify-content: space-between;
			font-size: 22rpx;
			align-items: center;
			color: #91909a;
			margin-bottom: 50rpx;
			position: relative;

			.left {
				display: flex;
				width: calc(100% - 240rpx);

				.u-avatar {
					border-radius: 50% !important;
					overflow: hidden;
					padding: 4rpx;
					border: 4rpx solid #30A6E9;

					.u-avatar__img {
						border-radius: 50% !important;
					}
				}

				.info {
					margin-left: 38rpx;
					width: calc(100% - 200rpx);

					.uaer-name {
						color: #1b1d29;
						font-size: 26rpx;
						line-height: 40rpx;
					}

					.des {
						margin-top: 10rpx;
						display: -webkit-box;
						display: -moz-box;
						white-space: pre-wrap;
						word-wrap: break-word;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						margin-top: 28rpx;
						/* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
						-webkit-line-clamp: 2;
					}
				}
			}

			.followBtn1 {
				padding: 0 20rpx;
				height: 29px;
				border-radius: 4px;
				line-height: 29px;
				text-align: center;
				background-color: #2934D0;
				color: #fff;
				margin: 0 16rpx;
			}

			.followBtn {
				padding: 0 20rpx;
				height: 29px;
				border-radius: 4px;
				line-height: 29px;
				text-align: center;
				background: rgb(252, 61, 92);
				color: #fff;
				margin: 0 16rpx;
			}

			.flex-bottom {
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>